<!doctype html>
<!--[if IE 7 ]>
<html class="no-js ie ie7 lte7 lte8 lte9" lang="zh"> <![endif]-->
<!--[if IE 8 ]>
<html class="no-js ie ie8 lte8 lte9" lang="zh"> <![endif]-->
<!--[if IE 9 ]>
<html class="no-js ie ie9 lte9" lang="zh"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html class="no-js" lang="zh"> <!--<![endif]-->
<head data-live-domain="api.jquery.com">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>.change() | jQuery API Documentation</title>

    <meta name="author" content="JS Foundation - js.foundation">
    <meta name="description" content="">

    <meta name="viewport" content="width=device-width">

    <link rel="shortcut icon" href="//api.jquery.com/jquery-wp-content/themes/api.jquery.com/i/favicon.ico">

    <link rel="stylesheet" href="//api.jquery.com/jquery-wp-content/themes/jquery/css/base.css?v=3">
    <link rel="stylesheet" href="//api.jquery.com/jquery-wp-content/themes/api.jquery.com/style.css">

    <script src="//api.jquery.com/jquery-wp-content/themes/jquery/js/modernizr.custom.2.8.3.min.js"></script>

    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>

    <script src="//api.jquery.com/jquery-wp-content/themes/jquery/js/plugins.js"></script>
    <script src="//api.jquery.com/jquery-wp-content/themes/jquery/js/main.js"></script>

    <script src="https://use.typekit.net/wde1aof.js"></script>
    <script>try {
        Typekit.load();
    } catch (e) {
    }</script>
    <!-- at the end of the HEAD -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"/>
    <link rel="stylesheet" href="//api.jquery.com/jquery-wp-content/themes/jquery/css/docsearch.css">

    <link rel='https://api.w.org/' href='//api.jquery.com/wp-json/'/>
    <meta name="generator" content="WordPress 4.5.2"/>
    <link rel="alternate" type="application/json+oembed"
          href="//api.jquery.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fapi.jquery.com%2Fchange%2F"/>
    <link rel="alternate" type="text/xml+oembed"
          href="//api.jquery.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fapi.jquery.com%2Fchange%2F&#038;format=xml"/>

</head>
<body class="api jquery single single-post postid-83 single-format-standard single-author singular">

<header>
    <section id="global-nav">
        <nav>
            <div class="constrain">
                <ul class="projects">
                    <li class="project jquery"><a href="https://jquery.com/" title="jQuery">jQuery</a></li>
                    <li class="project jquery-ui"><a href="https://jqueryui.com/" title="jQuery UI">jQuery UI</a></li>
                    <li class="project jquery-mobile"><a href="https://jquerymobile.com/" title="jQuery Mobile">jQuery
                        Mobile</a></li>
                    <li class="project sizzlejs"><a href="https://sizzlejs.com/" title="Sizzle">Sizzle</a></li>
                    <li class="project qunitjs"><a href="https://qunitjs.com/" title="QUnit">QUnit</a></li>
                </ul>
                <ul class="links">
                    <li><a href="https://plugins.jquery.com/">Plugins</a></li>
                    <li class="dropdown"><a href="https://contribute.jquery.org/">Contribute</a>
                        <ul>
                            <li><a href="https://js.foundation/CLA">CLA</a></li>
                            <li><a href="https://contribute.jquery.org/style-guide/">Style Guides</a></li>
                            <li><a href="https://contribute.jquery.org/triage/">Bug Triage</a></li>
                            <li><a href="https://contribute.jquery.org/code/">Code</a></li>
                            <li><a href="https://contribute.jquery.org/documentation/">Documentation</a></li>
                            <li><a href="https://contribute.jquery.org/web-sites/">Web Sites</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="https://js.foundation/events">Events</a>
                        <ul class="wide">
                        </ul>
                    </li>
                    <li class="dropdown"><a href="https://jquery.org/support/">Support</a>
                        <ul>
                            <li><a href="https://learn.jquery.com/">Learning Center</a></li>
                            <li><a href="https://irc.jquery.org/">IRC/Chat</a></li>
                            <li><a href="https://forum.jquery.com/">Forums</a></li>
                            <li><a href="https://stackoverflow.com/tags/jquery/info">Stack Overflow</a></li>
                            <li><a href="https://jquery.org/support/">Commercial Support</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="https://js.foundation/">JS Foundation</a>
                        <ul>
                            <li><a href="https://js.foundation/about/join">Join</a></li>
                            <li><a href="https://js.foundation/about/members">Members</a></li>
                            <li><a href="https://js.foundation/about/leadership">Leadership</a></li>
                            <li><a href="https://js.foundation/community/code-of-conduct">Conduct</a></li>
                            <li><a href="https://js.foundation/about/donate">Donate</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </section>
</header>

<div id="container">
    <div id="logo-events" class="constrain clearfix">
        <h2 class="logo"><a href="https://jquery.com/" title="jQuery API Documentation">jQuery API Documentation</a>
        </h2>

        <aside>
            <div id="broadcast">
                <a href="https://js.foundation/about/donate" title="Support the JS Foundation"><img
                        src="/jquery-wp-content/themes/jquery/content/donate.png" title="Support the JS Foundation"
                        alt="Support the JS Foundation" border="0" width="400" height="100"></a>
            </div>
        </aside>
    </div>

    <nav id="main" class="constrain clearfix">
        <div class="menu-top-container">
            <ul id="menu-top" class="menu">
                <li class="menu-item"><a href="https://jquery.com/download/">Download</a></li>
                <li class="menu-item current"><a href="https://api.jquery.com/">API Documentation</a></li>
                <li class="menu-item"><a href="https://blog.jquery.com/">Blog</a></li>
                <li class="menu-item"><a href="https://plugins.jquery.com/">Plugins</a></li>
                <li class="menu-item"><a href="https://jquery.com/browser-support/">Browser Support</a></li>
            </ul>
        </div>

        <form method="get" class="searchform" action="//api.jquery.com/">
            <button type="submit" class="icon-search"><span class="visuallyhidden">search</span></button>
            <label>
                <span class="visuallyhidden">Search jQuery API Documentation</span>
                <input type="text" name="s" value=""
                       placeholder="Search">
            </label>
        </form>
    </nav>

    <div id="content-wrapper" class="clearfix row">

        <div class="content-right twelve columns">
            <div id="content">

                <article id="post-83"
                         class="post-83 post type-post status-publish format-standard hentry category-form-events category-forms category-65 category-78">
                    <header class="entry-header">
                        <h1 class="entry-title">.change()</h1>
                        <hr>
                        <div class="entry-meta">
                            Categories: <span class="category"><a href="../category/events/">Events</a> &gt; <a
                                href="../category/events/form-events/">Form Events</a></span><span
                                class="category-divider"> | </span><span class="category"><a
                                href="../category/forms/">Forms</a></span></div><!-- .entry-meta -->
                    </header><!-- .entry-header -->

                    <div class="entry-content">
                        <article id="change1" class="entry method"><h2 class="section-title">
                            <span class="name">.change( handler )</span><span class="returns">Returns: <a
                                href="http://api.jquery.com/Types/#jQuery">jQuery</a></span>
                        </h2>
                            <div class="entry-wrapper">
                                <p class="desc"><strong>Description: </strong>Bind an event handler to the &quot;change&quot;
                                    JavaScript event, or trigger that event on an element.</p>
                                <ul class="signatures">
                                    <li class="signature">
                                        <h4 class="name">
                                            <span class="version-details">version added: <a
                                                    href="/category/version/1.0/">1.0</a></span><a id="change-handler"
                                                                                                   href="#change-handler"><span
                                                class="icon-link"></span>.change( handler )</a>
                                        </h4>
                                        <ul>
                                            <li id="change-handler-handler">
                                                <div><strong>handler</strong></div>
                                                <div>Type: <a href="http://api.jquery.com/Types/#Function">Function</a>(
                                                    <a href="http://api.jquery.com/Types/#Event">Event</a> eventObject )
                                                </div>
                                                <div>A function to execute each time the event is triggered.</div>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="signature">
                                        <h4 class="name">
                                            <span class="version-details">version added: <a
                                                    href="/category/version/1.4.3/">1.4.3</a></span><a
                                                id="change-eventData-handler" href="#change-eventData-handler"><span
                                                class="icon-link"></span>.change( [eventData ], handler )</a>
                                        </h4>
                                        <ul>
                                            <li id="change-eventData-handler-eventData">
                                                <div><strong>eventData</strong></div>
                                                <div>Type: <a href="http://api.jquery.com/Types/#Anything">Anything</a>
                                                </div>
                                                <div>An object containing data that will be passed to the event
                                                    handler.
                                                </div>
                                            </li>
                                            <li id="change-eventData-handler-handler">
                                                <div><strong>handler</strong></div>
                                                <div>Type: <a href="http://api.jquery.com/Types/#Function">Function</a>(
                                                    <a href="http://api.jquery.com/Types/#Event">Event</a> eventObject )
                                                </div>
                                                <div>A function to execute each time the event is triggered.</div>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="signature">
                                        <h4 class="name">
                                            <span class="version-details">version added: <a
                                                    href="/category/version/1.0/">1.0</a></span><a id="change"
                                                                                                   href="#change"><span
                                                class="icon-link"></span>.change()</a>
                                        </h4>
                                        <ul>
                                            <li>
                                                <div class="null-signature">This signature does not accept any
                                                    arguments.
                                                </div>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                                <div class="longdesc" id="entry-longdesc">
                                    <p>This method is a shortcut for <code>.on( &quot;change&quot;, handler )</code> in
                                        the first two variations, and <code>.trigger( &quot;change&quot; )</code> in the
                                        third.</p>
                                    <p>The <code>change</code> event is sent to an element when its value changes. This
                                        event is limited to <code>&lt;input&gt;</code> elements,
                                        <code>&lt;textarea&gt;</code> boxes and <code>&lt;select&gt;</code> elements.
                                        For select boxes, checkboxes, and radio buttons, the event is fired immediately
                                        when the user makes a selection with the mouse, but for the other element types
                                        the event is deferred until the element loses focus.</p>
                                    <p>For example, consider the HTML:</p>
                                    <div class="syntaxhighlighter xml">
                                        <table>
                                            <tbody>
                                            <tr>

                                                <td class="gutter">

                                                    <div class="line n1">1</div>

                                                    <div class="line n2">2</div>

                                                    <div class="line n3">3</div>

                                                    <div class="line n4">4</div>

                                                    <div class="line n5">5</div>

                                                    <div class="line n6">6</div>

                                                    <div class="line n7">7</div>

                                                    <div class="line n8">8</div>

                                                    <div class="line n9">9</div>

                                                    <div class="line n10">10</div>

                                                </td>

                                                <td class="code">
                                                    <pre><div class="container"><div class="line"><code><span
                                                            class="hljs-tag">&lt;<span class="hljs-name">form</span>&gt;</span></code></div></div><div
                                                            class="container"><div class="line"><code>  <span
                                                            class="hljs-tag">&lt;<span
                                                            class="hljs-name">input</span> <span
                                                            class="hljs-attr">class</span>=<span class="hljs-string">&quot;target&quot;</span> <span
                                                            class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span
                                                            class="hljs-attr">value</span>=<span class="hljs-string">&quot;Field 1&quot;</span>&gt;</span></code></div></div><div
                                                            class="container"><div class="line"><code>  <span
                                                            class="hljs-tag">&lt;<span
                                                            class="hljs-name">select</span> <span class="hljs-attr">class</span>=<span
                                                            class="hljs-string">&quot;target&quot;</span>&gt;</span></code></div></div><div
                                                            class="container"><div class="line"><code>    <span
                                                            class="hljs-tag">&lt;<span
                                                            class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span
                                                            class="hljs-string">&quot;option1&quot;</span> <span
                                                            class="hljs-attr">selected</span>=<span class="hljs-string">&quot;selected&quot;</span>&gt;</span>Option 1<span
                                                            class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span></code></div></div><div
                                                            class="container"><div class="line"><code>    <span
                                                            class="hljs-tag">&lt;<span
                                                            class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span
                                                            class="hljs-string">&quot;option2&quot;</span>&gt;</span>Option 2<span
                                                            class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span></code></div></div><div
                                                            class="container"><div class="line"><code>  <span
                                                            class="hljs-tag">&lt;/<span class="hljs-name">select</span>&gt;</span></code></div></div><div
                                                            class="container"><div class="line"><code><span
                                                            class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span></code></div></div><div
                                                            class="container"><div class="line"><code><span
                                                            class="hljs-tag">&lt;<span
                                                            class="hljs-name">div</span> <span
                                                            class="hljs-attr">id</span>=<span class="hljs-string">&quot;other&quot;</span>&gt;</span></code></div></div><div
                                                            class="container"><div class="line"><code>  Trigger the handler</code></div></div><div
                                                            class="container"><div class="line"><code><span
                                                            class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></div></div></pre>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>

                                    <p>The event handler can be bound to the text input and the select box:</p>
                                    <div class="syntaxhighlighter javascript">
                                        <table>
                                            <tbody>
                                            <tr>

                                                <td class="gutter">

                                                    <div class="line n1">1</div>

                                                    <div class="line n2">2</div>

                                                    <div class="line n3">3</div>

                                                </td>

                                                <td class="code">
                                                    <pre><div class="container"><div class="line"><code>$( <span
                                                            class="hljs-string">&quot;.target&quot;</span> ).change(<span
                                                            class="hljs-function"><span
                                                            class="hljs-keyword">function</span>(<span
                                                            class="hljs-params"></span>) </span>{</code></div></div><div
                                                            class="container"><div class="line"><code>  alert( <span
                                                            class="hljs-string">&quot;Handler for .change() called.&quot;</span> );</code></div></div><div
                                                            class="container"><div
                                                            class="line"><code>});</code></div></div></pre>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>

                                    <p>Now when the second option is selected from the dropdown, the alert is displayed.
                                        It is also displayed if you change the text in the field and then click away. If
                                        the field loses focus without the contents having changed, though, the event is
                                        not triggered. To trigger the event manually, apply <code>.change()</code>
                                        without arguments:</p>
                                    <div class="syntaxhighlighter javascript">
                                        <table>
                                            <tbody>
                                            <tr>

                                                <td class="gutter">

                                                    <div class="line n1">1</div>

                                                    <div class="line n2">2</div>

                                                    <div class="line n3">3</div>

                                                </td>

                                                <td class="code">
                                                    <pre><div class="container"><div class="line"><code>$( <span
                                                            class="hljs-string">&quot;#other&quot;</span> ).click(<span
                                                            class="hljs-function"><span
                                                            class="hljs-keyword">function</span>(<span
                                                            class="hljs-params"></span>) </span>{</code></div></div><div
                                                            class="container"><div class="line"><code>  $( <span
                                                            class="hljs-string">&quot;.target&quot;</span> ).change();</code></div></div><div
                                                            class="container"><div
                                                            class="line"><code>});</code></div></div></pre>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>

                                    <p>After this code executes, clicks on <samp>Trigger the handler</samp> will also
                                        alert the message. The message will display twice, because the handler has been
                                        bound to the <code>change</code> event on both of the form elements.</p>
                                    <p>As of jQuery 1.4, the <code>change</code> event bubbles in Internet Explorer,
                                        behaving consistently with the event in other modern browsers.</p>
                                    <div class="warning">
                                        <p><strong>Note: </strong>Changing the value of an input element using
                                            JavaScript, using <a href="/val"><code>.val()</code></a> for example, won&apos;t
                                            fire the event.</p>
                                    </div>
                                </div>
                                <h3>Additional Notes:</h3>
                                <div class="longdesc">
                                    <ul>
                                        <li>
                                            As the <code>.change()</code> method is just a shorthand for <code>.on(
                                            &quot;change&quot;, handler )</code>, detaching is possible using <code>.off(
                                            &quot;change&quot; )</code>.
                                        </li>
                                    </ul>
                                </div>
                                <section class="entry-examples" id="entry-examples">
                                    <header><h2>Examples:</h2></header>
                                    <div class="entry-example" id="example-0">
                                        <p>Attaches a change event to the select that gets the text for each selected
                                            option and writes them in the div. It then triggers the event for the
                                            initial text draw.</p>
                                        <div class="syntaxhighlighter xml">
                                            <table>
                                                <tbody>
                                                <tr>

                                                    <td class="gutter">

                                                        <div class="line n1">1</div>

                                                        <div class="line n2">2</div>

                                                        <div class="line n3">3</div>

                                                        <div class="line n4">4</div>

                                                        <div class="line n5">5</div>

                                                        <div class="line n6">6</div>

                                                        <div class="line n7">7</div>

                                                        <div class="line n8">8</div>

                                                        <div class="line n9">9</div>

                                                        <div class="line n10">10</div>

                                                        <div class="line n11">11</div>

                                                        <div class="line n12">12</div>

                                                        <div class="line n13">13</div>

                                                        <div class="line n14">14</div>

                                                        <div class="line n15">15</div>

                                                        <div class="line n16">16</div>

                                                        <div class="line n17">17</div>

                                                        <div class="line n18">18</div>

                                                        <div class="line n19">19</div>

                                                        <div class="line n20">20</div>

                                                        <div class="line n21">21</div>

                                                        <div class="line n22">22</div>

                                                        <div class="line n23">23</div>

                                                        <div class="line n24">24</div>

                                                        <div class="line n25">25</div>

                                                        <div class="line n26">26</div>

                                                        <div class="line n27">27</div>

                                                        <div class="line n28">28</div>

                                                        <div class="line n29">29</div>

                                                        <div class="line n30">30</div>

                                                        <div class="line n31">31</div>

                                                        <div class="line n32">32</div>

                                                        <div class="line n33">33</div>

                                                        <div class="line n34">34</div>

                                                        <div class="line n35">35</div>

                                                        <div class="line n36">36</div>

                                                        <div class="line n37">37</div>

                                                        <div class="line n38">38</div>

                                                    </td>

                                                    <td class="code">
                                                        <pre><div class="container"><div class="line"><code><span
                                                                class="hljs-meta">&lt;!doctype <span
                                                                class="hljs-meta-keyword">html</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">html</span> <span
                                                                class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span
                                                                class="hljs-attr">charset</span>=<span
                                                                class="hljs-string">&quot;utf-8&quot;</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">title</span>&gt;</span>change demo<span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">title</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">style</span>&gt;</span><span
                                                                class="css"></span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-selector-tag">div</span> {</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-attribute">color</span>: red;</code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>  }</code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">style</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span
                                                                class="hljs-string">&quot;https://code.jquery.com/jquery-3.5.0.js&quot;</span>&gt;</span><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">script</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">head</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code> </code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">select</span> <span class="hljs-attr">name</span>=<span
                                                                class="hljs-string">&quot;sweets&quot;</span> <span
                                                                class="hljs-attr">multiple</span>=<span
                                                                class="hljs-string">&quot;multiple&quot;</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">option</span>&gt;</span>Chocolate<span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">option</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">option</span> <span class="hljs-attr">selected</span>=<span
                                                                class="hljs-string">&quot;selected&quot;</span>&gt;</span>Candy<span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">option</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">option</span>&gt;</span>Taffy<span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">option</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">option</span> <span class="hljs-attr">selected</span>=<span
                                                                class="hljs-string">&quot;selected&quot;</span>&gt;</span>Caramel<span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">option</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">option</span>&gt;</span>Fudge<span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">option</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">option</span>&gt;</span>Cookie<span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">option</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">select</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span
                                                                class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code> </code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;<span
                                                                class="hljs-name">script</span>&gt;</span><span
                                                                class="javascript"></span></code></div></div><div
                                                                class="container"><div class="line"><code>$( <span
                                                                class="hljs-string">&quot;select&quot;</span> )</code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>  .change(<span
                                                                class="hljs-function"><span class="hljs-keyword">function</span> (<span
                                                                class="hljs-params"></span>) </span>{</code></div></div><div
                                                                class="container"><div class="line"><code>    <span
                                                                class="hljs-keyword">var</span> str = <span
                                                                class="hljs-string">&quot;&quot;</span>;</code></div></div><div
                                                                class="container"><div class="line"><code>    $( <span
                                                                class="hljs-string">&quot;select option:selected&quot;</span> ).each(<span
                                                                class="hljs-function"><span class="hljs-keyword">function</span>(<span
                                                                class="hljs-params"></span>) </span>{</code></div></div><div
                                                                class="container"><div class="line"><code>      str += $( <span
                                                                class="hljs-built_in">this</span> ).text() + <span
                                                                class="hljs-string">&quot; &quot;</span>;</code></div></div><div
                                                                class="container"><div class="line"><code>    });</code></div></div><div
                                                                class="container"><div class="line"><code>    $( <span
                                                                class="hljs-string">&quot;div&quot;</span> ).text( str );</code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>  })</code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>  .change();</code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">script</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code> </code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">body</span>&gt;</span></code></div></div><div
                                                                class="container"><div class="line"><code><span
                                                                class="hljs-tag">&lt;/<span
                                                                class="hljs-name">html</span>&gt;</span></code></div></div></pre>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>

                                        <h4>Demo:</h4>
                                        <div class="demo code-demo"></div>
                                    </div>
                                    <div class="entry-example" id="example-1">
                                        <p>To add a validity test to all text input elements:</p>
                                        <div class="syntaxhighlighter javascript">
                                            <table>
                                                <tbody>
                                                <tr>

                                                    <td class="gutter">

                                                        <div class="line n1">1</div>

                                                        <div class="line n2">2</div>

                                                        <div class="line n3">3</div>

                                                    </td>

                                                    <td class="code">
                                                        <pre><div class="container"><div class="line"><code>$( <span
                                                                class="hljs-string">&quot;input[type=&apos;text&apos;]&quot;</span> ).change(<span
                                                                class="hljs-function"><span class="hljs-keyword">function</span>(<span
                                                                class="hljs-params"></span>) </span>{</code></div></div><div
                                                                class="container"><div class="line"><code>  <span
                                                                class="hljs-comment">// Check input( $( this ).val() ) for validity here</span></code></div></div><div
                                                                class="container"><div
                                                                class="line"><code>});</code></div></div></pre>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>

                                    </div>
                                </section>
                            </div>
                        </article>
                    </div><!-- .entry-content -->

                </article><!-- #post-83 -->
            </div>

            <div id="sidebar" class="widget-area" role="complementary">
                <aside id="categories" class="widget">
                    <ul>
                        <li class="cat-item cat-item-1"><a href="../category/ajax/">Ajax</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-2"><a
                                        href="../category/ajax/global-ajax-event-handlers/">Global Ajax
                                    Event Handlers</a>
                                </li>
                                <li class="cat-item cat-item-3"><a
                                        href="../category/ajax/helper-functions/">Helper Functions</a>
                                </li>
                                <li class="cat-item cat-item-4"><a
                                        href="../category/ajax/low-level-interface/">Low-Level
                                    Interface</a>
                                </li>
                                <li class="cat-item cat-item-5"><a
                                        href="../category/ajax/shorthand-methods/">Shorthand Methods</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-6"><a href="../category/attributes/">Attributes</a>
                        </li>
                        <li class="cat-item cat-item-7"><a href="../category/callbacks-object/">Callbacks
                            Object</a>
                        </li>
                        <li class="cat-item cat-item-8"><a href="../category/core/">Core</a>
                        </li>
                        <li class="cat-item cat-item-9"><a href="../category/css/">CSS</a>
                        </li>
                        <li class="cat-item cat-item-10"><a href="../category/data/">Data</a>
                        </li>
                        <li class="cat-item cat-item-11"><a href="../category/deferred-object/">Deferred
                            Object</a>
                        </li>
                        <li class="cat-item cat-item-87"><a href="../category/deprecated/">Deprecated</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-90"><a
                                        href="../category/deprecated/deprecated-1.3/">Deprecated 1.3</a>
                                </li>
                                <li class="cat-item cat-item-88"><a
                                        href="../category/deprecated/deprecated-1.7/">Deprecated 1.7</a>
                                </li>
                                <li class="cat-item cat-item-89"><a
                                        href="../category/deprecated/deprecated-1.8/">Deprecated 1.8</a>
                                </li>
                                <li class="cat-item cat-item-94"><a
                                        href="../category/deprecated/deprecated-1.9/">Deprecated 1.9</a>
                                </li>
                                <li class="cat-item cat-item-93"><a
                                        href="../category/deprecated/deprecated-1.10/">Deprecated 1.10</a>
                                </li>
                                <li class="cat-item cat-item-98"><a
                                        href="../category/deprecated/deprecated-3.0/">Deprecated 3.0</a>
                                </li>
                                <li class="cat-item cat-item-101"><a
                                        href="../category/deprecated/deprecated-3.2/">Deprecated 3.2</a>
                                </li>
                                <li class="cat-item cat-item-99"><a
                                        href="../category/deprecated/deprecated-3.3/">Deprecated 3.3</a>
                                </li>
                                <li class="cat-item cat-item-100"><a
                                        href="../category/deprecated/deprecated-3.4/">Deprecated 3.4</a>
                                </li>
                                <li class="cat-item cat-item-102"><a
                                        href="../category/deprecated/deprecated-3.5/">Deprecated 3.5</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-12"><a href="../category/dimensions/">Dimensions</a>
                        </li>
                        <li class="cat-item cat-item-13"><a href="../category/effects/">Effects</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-14"><a href="../category/effects/basics/">Basics</a>
                                </li>
                                <li class="cat-item cat-item-15"><a
                                        href="../category/effects/custom-effects/">Custom</a>
                                </li>
                                <li class="cat-item cat-item-16"><a href="../category/effects/fading/">Fading</a>
                                </li>
                                <li class="cat-item cat-item-17"><a href="../category/effects/sliding/">Sliding</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-18 current-cat-parent current-cat-ancestor"><a
                                href="../category/events/">Events</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-19"><a
                                        href="../category/events/browser-events/">Browser Events</a>
                                </li>
                                <li class="cat-item cat-item-20"><a
                                        href="../category/events/document-loading/">Document Loading</a>
                                </li>
                                <li class="cat-item cat-item-21"><a
                                        href="../category/events/event-handler-attachment/">Event Handler
                                    Attachment</a>
                                </li>
                                <li class="cat-item cat-item-22"><a
                                        href="../category/events/event-object/">Event Object</a>
                                </li>
                                <li class="cat-item cat-item-23 current-cat"><a
                                        href="../category/events/form-events/">Form Events</a>
                                </li>
                                <li class="cat-item cat-item-24"><a
                                        href="../category/events/keyboard-events/">Keyboard Events</a>
                                </li>
                                <li class="cat-item cat-item-25"><a
                                        href="../category/events/mouse-events/">Mouse Events</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-26"><a href="../category/forms/">Forms</a>
                        </li>
                        <li class="cat-item cat-item-27"><a href="../category/internals/">Internals</a>
                        </li>
                        <li class="cat-item cat-item-28"><a
                                href="../category/manipulation/">Manipulation</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-29"><a
                                        href="../category/manipulation/class-attribute/">Class
                                    Attribute</a>
                                </li>
                                <li class="cat-item cat-item-30"><a
                                        href="../category/manipulation/copying/">Copying</a>
                                </li>
                                <li class="cat-item cat-item-32"><a
                                        href="../category/manipulation/dom-insertion-around/">DOM
                                    Insertion, Around</a>
                                </li>
                                <li class="cat-item cat-item-33"><a
                                        href="../category/manipulation/dom-insertion-inside/">DOM
                                    Insertion, Inside</a>
                                </li>
                                <li class="cat-item cat-item-34"><a
                                        href="../category/manipulation/dom-insertion-outside/">DOM
                                    Insertion, Outside</a>
                                </li>
                                <li class="cat-item cat-item-35"><a
                                        href="../category/manipulation/dom-removal/">DOM Removal</a>
                                </li>
                                <li class="cat-item cat-item-36"><a
                                        href="../category/manipulation/dom-replacement/">DOM
                                    Replacement</a>
                                </li>
                                <li class="cat-item cat-item-37"><a
                                        href="../category/manipulation/general-attributes/">General
                                    Attributes</a>
                                </li>
                                <li class="cat-item cat-item-38"><a
                                        href="../category/manipulation/style-properties/">Style
                                    Properties</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-39"><a href="../category/miscellaneous/">Miscellaneous</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-40"><a
                                        href="../category/miscellaneous/collection-manipulation/">Collection
                                    Manipulation</a>
                                </li>
                                <li class="cat-item cat-item-41"><a
                                        href="../category/miscellaneous/data-storage/">Data Storage</a>
                                </li>
                                <li class="cat-item cat-item-42"><a
                                        href="../category/miscellaneous/dom-element-methods/">DOM Element
                                    Methods</a>
                                </li>
                                <li class="cat-item cat-item-43"><a
                                        href="../category/miscellaneous/setup-methods/">Setup Methods</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-44"><a href="../category/offset/">Offset</a>
                        </li>
                        <li class="cat-item cat-item-45"><a href="../category/properties/">Properties</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-46"><a
                                        href="../category/properties/jquery-object-instance-properties/">Properties
                                    of jQuery Object Instances</a>
                                </li>
                                <li class="cat-item cat-item-47"><a
                                        href="../category/properties/global-jquery-object-properties/">Properties
                                    of the Global jQuery Object</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-92"><a href="../category/removed/">Removed</a>
                        </li>
                        <li class="cat-item cat-item-48"><a href="../category/selectors/">Selectors</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-49"><a
                                        href="../category/selectors/attribute-selectors/">Attribute</a>
                                </li>
                                <li class="cat-item cat-item-50"><a
                                        href="../category/selectors/basic-css-selectors/">Basic</a>
                                </li>
                                <li class="cat-item cat-item-51"><a
                                        href="../category/selectors/basic-filter-selectors/">Basic
                                    Filter</a>
                                </li>
                                <li class="cat-item cat-item-52"><a
                                        href="../category/selectors/child-filter-selectors/">Child
                                    Filter</a>
                                </li>
                                <li class="cat-item cat-item-53"><a
                                        href="../category/selectors/content-filter-selector/">Content
                                    Filter</a>
                                </li>
                                <li class="cat-item cat-item-54"><a
                                        href="../category/selectors/form-selectors/">Form</a>
                                </li>
                                <li class="cat-item cat-item-55"><a
                                        href="../category/selectors/hierarchy-selectors/">Hierarchy</a>
                                </li>
                                <li class="cat-item cat-item-56"><a
                                        href="../category/selectors/jquery-selector-extensions/">jQuery
                                    Extensions</a>
                                </li>
                                <li class="cat-item cat-item-57"><a
                                        href="../category/selectors/visibility-filter-selectors/">Visibility
                                    Filter</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-58"><a href="../category/traversing/">Traversing</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-59"><a
                                        href="../category/traversing/filtering/">Filtering</a>
                                </li>
                                <li class="cat-item cat-item-60"><a
                                        href="../category/traversing/miscellaneous-traversal/">Miscellaneous
                                    Traversing</a>
                                </li>
                                <li class="cat-item cat-item-61"><a
                                        href="../category/traversing/tree-traversal/">Tree Traversal</a>
                                </li>
                            </ul>
                        </li>
                        <li class="cat-item cat-item-63"><a href="../category/utilities/">Utilities</a>
                        </li>
                        <li class="cat-item cat-item-64"><a href="../category/version/">Version</a>
                            <ul class='children'>
                                <li class="cat-item cat-item-65"><a href="../category/version/1.0/">Version
                                    1.0</a>
                                </li>
                                <li class="cat-item cat-item-66"><a href="../category/version/1.0.4/">Version
                                    1.0.4</a>
                                </li>
                                <li class="cat-item cat-item-67"><a href="../category/version/1.1/">Version
                                    1.1</a>
                                </li>
                                <li class="cat-item cat-item-68"><a href="../category/version/1.1.2/">Version
                                    1.1.2</a>
                                </li>
                                <li class="cat-item cat-item-69"><a href="../category/version/1.1.3/">Version
                                    1.1.3</a>
                                </li>
                                <li class="cat-item cat-item-70"><a href="../category/version/1.1.4/">Version
                                    1.1.4</a>
                                </li>
                                <li class="cat-item cat-item-71"><a href="../category/version/1.2/">Version
                                    1.2</a>
                                </li>
                                <li class="cat-item cat-item-72"><a href="../category/version/1.2.3/">Version
                                    1.2.3</a>
                                </li>
                                <li class="cat-item cat-item-73"><a href="../category/version/1.2.6/">Version
                                    1.2.6</a>
                                </li>
                                <li class="cat-item cat-item-74"><a href="../category/version/1.3/">Version
                                    1.3</a>
                                </li>
                                <li class="cat-item cat-item-75"><a href="../category/version/1.4/">Version
                                    1.4</a>
                                </li>
                                <li class="cat-item cat-item-76"><a href="../category/version/1.4.1/">Version
                                    1.4.1</a>
                                </li>
                                <li class="cat-item cat-item-77"><a href="../category/version/1.4.2/">Version
                                    1.4.2</a>
                                </li>
                                <li class="cat-item cat-item-78"><a href="../category/version/1.4.3/">Version
                                    1.4.3</a>
                                </li>
                                <li class="cat-item cat-item-79"><a href="../category/version/1.4.4/">Version
                                    1.4.4</a>
                                </li>
                                <li class="cat-item cat-item-80"><a href="../category/version/1.5/">Version
                                    1.5</a>
                                </li>
                                <li class="cat-item cat-item-81"><a href="../category/version/1.5.1/">Version
                                    1.5.1</a>
                                </li>
                                <li class="cat-item cat-item-82"><a href="../category/version/1.6/">Version
                                    1.6</a>
                                </li>
                                <li class="cat-item cat-item-83"><a href="../category/version/1.7/">Version
                                    1.7</a>
                                </li>
                                <li class="cat-item cat-item-84"><a href="../category/version/1.8/">Version
                                    1.8</a>
                                </li>
                                <li class="cat-item cat-item-86"><a href="../category/version/1.9/">Version
                                    1.9</a>
                                </li>
                                <li class="cat-item cat-item-103"><a
                                        href="../category/version/1.12-and-2.2/">Version 1.12 &amp;
                                    2.2</a>
                                </li>
                                <li class="cat-item cat-item-95"><a href="../category/version/3.0/">Version
                                    3.0</a>
                                </li>
                                <li class="cat-item cat-item-96"><a href="../category/version/3.1/">Version
                                    3.1</a>
                                </li>
                                <li class="cat-item cat-item-104"><a href="../category/version/3.2/">Version
                                    3.2</a>
                                </li>
                                <li class="cat-item cat-item-105"><a href="../category/version/3.3/">Version
                                    3.3</a>
                                </li>
                                <li class="cat-item cat-item-106"><a href="../category/version/3.4/">Version
                                    3.4</a>
                                </li>
                                <li class="cat-item cat-item-107"><a href="../category/version/3.5/">Version
                                    3.5</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </aside>
            </div>
        </div>
    </div>
</div>

<footer class="clearfix simple">
    <div class="constrain">
        <div class="row">
            <div class="six columns offset-by-three">
                <h3><span>Books</span></h3>
                <ul class="books">
                    <li>
                        <a href="https://www.packtpub.com/web-development/learning-jquery-fourth-edition">
                            <img src="//api.jquery.com/jquery-wp-content/themes/jquery/content/books/learning-jquery-4th-ed.jpg"
                                 alt="Learning jQuery 4th Edition by Karl Swedberg and Jonathan Chaffer" width="92"
                                 height="114">
                            Learning jQuery Fourth Edition
                            <cite>Karl Swedberg and Jonathan Chaffer</cite>
                        </a>
                    </li>
                    <li>
                        <a href="https://www.manning.com/books/jquery-in-action-third-edition">
                            <img src="//api.jquery.com/jquery-wp-content/themes/jquery/content/books/jquery-in-action.jpg"
                                 alt="jQuery in Action by Bear Bibeault, Yehuda Katz, and Aurelio De Rosa" width="92"
                                 height="114">
                            jQuery in Action
                            <cite>Bear Bibeault, Yehuda Katz, and Aurelio De Rosa</cite>
                        </a>
                    </li>
                    <li>
                        <a href="https://www.syncfusion.com/ebooks/jquery">
                            <img src="//api.jquery.com/jquery-wp-content/themes/jquery/content/books/jquery-succinctly.jpg"
                                 alt="jQuery Succinctly by Cody Lindley" width="92" height="114">
                            jQuery Succinctly
                            <cite>Cody Lindley</cite>
                        </a>
                    </li>
                </ul>
            </div>
        </div>


        <div id="legal">
            <ul class="footer-site-links">
                <li><a class="icon-pencil" href="https://learn.jquery.com/">Learning Center</a></li>
                <li><a class="icon-group" href="https://forum.jquery.com/">Forum</a></li>
                <li><a class="icon-wrench" href="https://api.jquery.com/">API</a></li>
                <li><a class="icon-twitter" href="https://twitter.com/jquery">Twitter</a></li>
                <li><a class="icon-comments" href="https://irc.jquery.org/">IRC</a></li>
                <li><a class="icon-github" href="https://github.com/jquery">GitHub</a></li>
            </ul>
            <p class="copyright">
                Copyright 2021 <a href="https://openjsf.org/">OpenJS Foundation</a> and jQuery contributors. All rights
                reserved. See <a href="https://jquery.org/license/">jQuery License</a> for more information. The <a
                    href="https://openjsf.org/">OpenJS Foundation</a> has registered trademarks and uses trademarks. For
                a list of trademarks of the <a href="https://openjsf.org/">OpenJS Foundation</a>, please see our <a
                    href="https://trademark-policy.openjsf.org/">Trademark Policy</a> and <a
                    href="https://trademark-list.openjsf.org/">Trademark List</a>. Trademarks and logos not indicated on
                the <a href="https://trademark-list.openjsf.org/">list of OpenJS Foundation trademarks</a> are
                trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any
                affiliation with or endorsement by them. OpenJS Foundation <a href="https://terms-of-use.openjsf.org/">Terms
                of Use</a>, <a href="https://privacy-policy.openjsf.org/">Privacy</a>, and <a
                    href="https://www.linuxfoundation.org/cookies">Cookie</a> Policies also apply.
                <span class="sponsor-line"><a href="https://www.digitalocean.com" class="do-link">Web hosting by Digital Ocean</a> | <a
                        href="https://www.stackpath.com" class="sp-link">CDN by StackPath</a></span>
            </p>
        </div>

    </div>
</footer>

<script type='text/javascript' src='//api.jquery.com/wp-includes/js/comment-reply.min.js?ver=4.5.2'></script>
<script type='text/javascript' src='//api.jquery.com/wp-includes/js/wp-embed.min.js?ver=4.5.2'></script>
<!-- at the end of the BODY -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js" onload="document.querySelector('input[name=\'s\']') && docsearch({apiKey: '3cfde9aca378c8aab554d5bf1b23489b',
		indexName: 'jquery',
		inputSelector: 'input[name=\'s\']',
		debug: true // Set debug to true if you want to inspect the dropdown
	})" async></script>
</body>
</html>
